<template>
  <el-container>
    <el-header>欢迎使用淘淘管理工具</el-header>
    <el-row>
      <el-col :span="24">
        <p>
          淘淘-electron 脚手架，一个记录地址的小工具，适合初学者学习使用。主要使用技术，eletron、vue、
          Element UI、简易数据库lowdb(可直接存储为json文件，个人觉得比较适合)，语法校验eslint
        </p>
      </el-col> 
    </el-row>
    <el-row :gutter="12">
      <el-col :span="8">
        <div class="block">
          <el-timeline>
            <el-timeline-item timestamp="2019/11/11" placement="top">
              <p>脚手架基本结构完成</p>
            </el-timeline-item>
          </el-timeline>
          <el-timeline>
            <el-timeline-item timestamp="2019/04/30" placement="top">
              <p>脚手架计划开启</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
      <el-col :span="16">
        <el-tag type="success" @click="openDataUrl" style="cursor:pointer;">
          数据文件data.json
        </el-tag>
        <el-tag type="danger" style="margin-bottom:20px">为嗷嗷待哺的作者奶粉助力</el-tag>
        <img src="../../assets/imgs/pay.png" alt="奶粉助力" width="230" height="300" sizes="" srcset="">
      </el-col>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
// 引入remote模块
import { remote, app } from 'electron'
// 根据process.type来分辨在哪种模式使用哪种模块
const APP = process.type === 'renderer' ? remote.app : app
// 获取electron应用的用户目录
const STORE_PATH = APP.getPath('userData')

export default {
  name: 'home',
  data () {
    return {
      data: [],
      datapath: STORE_PATH
    }
  },
  methods: {
    openDataUrl () {
      this.$message({
        message: STORE_PATH,
        showClose: true,
        duration: 0
      })
    }
  }
}
</script>

<style scouped>
.el-row {
  margin-bottom: 20px;
  padding: 0 20px;
}
p {
 text-align: left;
}
.el-timeline-item__timestamp.is-top {
  text-align: left;
}
</style>
 